<template>
	<view class="contract-container">
	  <!-- 合同标题 -->
	  <view class="contract-title">旅游产品销售合同</view>
	
	  <!-- 双方权利与义务 -->
	  <view class="contract-section">
	    <view class="section-title">一、双方的权力与义务</view>
	    
	    <view class="subsection">
	      <view class="subsection-title">甲方义务</view>
	      <view class="item">产品真实性：确保旅游产品信息（如行程、价格、服务标准）真实有效，与描述一致。</view>
	      <view class="item">订单处理：在用户支付成功后24小时内确认订单，并提供电子合同及行程单。</view>
	    </view>
	
	    <view class="subsection">
	      <view class="subsection-title">乙方权利</view>
	      <view class="item">查阅产品详情、订单状态及退改政策。</view>
	      <view class="item">在支付成功后获得电子合同及行程单。</view>
	    </view>
	
	    <view class="subsection">
	      <view class="subsection-title">乙方义务</view>
	      <view class="item">如实填写个人信息（如手机号、身份证号），并承担信息错误导致的责任。</view>
	      <view class="item">按时支付订单金额，逾期未付视为自动放弃订单。</view>
	      <view class="item">遵守旅游行程安排及相关法律法规。</view>
	    </view>
	  </view>
	
	  <!-- 费用与支付 -->
	  <view class="contract-section">
	    <view class="section-title">二、费用与支付</view>
	    <view class="table">
			<view class="table-row">
			  <view class="table-cell">订单编号</view>
			  <view class="table-cell">{{data?.orderNo || 0}}</view>
			</view>
	      <view class="table-row">
	        <view class="table-cell">订单总额</view>
	        <view class="table-cell">¥{{data?.adultPrice || 0 + data?.childPrice || 0}}</view>
	      </view>
	      <view class="table-row">
	        <view class="table-cell">支付方式</view>
	        <view class="table-cell">平台支持的第三方支付（如微信、支付宝）</view>
	      </view>
		  <view class="table-row">
		    <view class="table-cell">产品名称</view>
		    <view class="table-cell">{{data?.productName}}</view>
		  </view>
		  <view class="table-row">
		    <view class="table-cell">最终目的</view>
		    <view class="table-cell">{{data?.location}}</view>
		  </view>
	      <view class="table-row">
	        <view class="table-cell">退款说明</view>
	        <view class="table-cell">
	          <view>未消费退款：在下单前一天申请，全额退款；</view>
	          <view>已消费退款：按实际未使用部分扣除手续费后退还。</view>
	        </view>
	      </view>
	    </view>
	  </view>
	
	  <!-- 违约责任 -->
	  <view class="contract-section">
	    <view class="section-title">三、违约责任</view>
	    <view class="item">甲方违约：未按约定提供服务，需赔偿乙方订单金额的<span class="highlight">50%</span>。</view>
	  </view>
	
	  <!-- 争议解决 -->
	  <view class="contract-section">
	    <view class="section-title">四、争议解决</view>
	    <view class="item">如发生纠纷，双方同意通过平台客户解决（如平台客服介入、仲裁或诉讼）。</view>
	  </view>
	
	  <!-- 其他条款 -->
	  <view class="contract-section">
	    <view class="section-title">五、其他条款</view>
	    <view class="item">隐私保护：甲方对乙方个人信息严格保密，仅用于订单处理及服务提供。</view>
	    <view class="item">法律适用：本合同适用中华人民共和国法律。</view>
	    <view class="item">完整协议：本合同约定与平台公示规则不一致的，以本合同为准。</view>
	  </view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useGlobalStore } from '@/stores/global.js'
import { onLoad } from '@dcloudio/uni-app'
import { getContracInfo } from '@/api/order.js'

const stores = useGlobalStore()
const data = ref(null)

onLoad((options) => {
	data.value = options.id
	getContracInfo(options.id).then(res => {
		data.value = res.data
	})
})
</script>

<style>
	
	/* pages/contract/contract.wxss */
	.contract-container {
	  padding: 20rpx;
	  font-size: 28rpx;
	  line-height: 1.6;
	}
	
	.contract-title {
	  text-align: center;
	  font-size: 36rpx;
	  font-weight: bold;
	  margin-bottom: 30rpx;
	}
	
	.section-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  margin: 20rpx 0 10rpx;
	  color: #333;
	}
	
	.subsection-title {
	  font-size: 30rpx;
	  font-weight: bold;
	  margin: 15rpx 0 10rpx;
	  color: #444;
	}
	
	.item {
	  margin: 10rpx 0;
	}
	
	.table {
	  width: 100%;
	  border: 1rpx solid #ddd;
	  margin: 10rpx 0;
	}
	
	.table-row {
	  display: flex;
	  border-bottom: 1rpx solid #ddd;
	}
	
	.table-row:last-child {
	  border-bottom: none;
	}
	
	.table-cell {
	  flex: 1;
	  padding: 15rpx;
	  border-right: 1rpx solid #ddd;
	}
	
	.table-cell:last-child {
	  border-right: none;
	}
	
	.highlight {
	  font-weight: bold;
	  color: #e64340;
	}
</style>